<template>
	<view>
		<view class="page-body">
			<view class="page-section">
				<video id="myVideo" :src="url" @error="videoErrorCallback" :danmu-list="danmuList"
				    enable-danmu danmu-btn controls style="width: 100%;"></video>

					<view class="danmu">
						<view>
							<view class="danmu-name">弹幕内容</view>
						</view>
						<view class="uni-list-cell-db">
							<input @blur="bindInputBlur" class="input-area" type="text" placeholder="在此处输入弹幕内容" />
						</view>
					</view>
				<view class="btn">
					<button @tap="bindSendDanmu" class="btn-danmu" formType="submit">发送弹幕</button>
				</view>
				 <!-- <view class="danmu">
					 <view class="danmu-name">弹幕内容</view>
					 <input type="text" placeholder="请在此输入弹幕内容" class="input-area" @input="input" v-model="inputValue" />
				 </view>
				 <view class="btn">
				 	<button type="default" class="btn-danmu" @click="senddanmu">发送弹幕</button>
				 </view>
				 <!-- 弹幕内容 -->
				 <!-- <view class="danmu-content">
				 	<view v-for="(item,index) in danmulist" :key='index' class="danmu-item">{{item}}</view>
				 </view> --> 
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'video',
				src: '',
				inputValue: '',
				danmuList: [{
						text: '第 1s 出现的弹幕',
						color: '#ff0000',
						time: 1
					},
					{
						text: '第 3s 出现的弹幕',
						color: '#ff00ff',
						time: 3
					}
				],
				url:''
				// danmulist:[],
				// inputValue:''
			}
		},
		onReady: function (res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		methods: {
			bindInputBlur: function (e) {
				this.inputValue = e.target.value
			},
			bindButtonTap: function () {
				var that = this
				uni.chooseVideo({
					sourceType: ['album', 'camera'],
					maxDuration: 60,
					camera: ['front', 'back'],
					success: function (res) {
						this.src = res.tempFilePath
					}
				})
			},
			// input(e){
			// 	console.log(e.detail.value)
			// 	this.inputValue=e.detail.value
			// },
			// senddanmu(){
			// 	this.danmulist.push(this.inputValue)
			// 	console.log(this.danmulist)
				
			// },
			
			bindSendDanmu: function () {
				this.videoContext.sendDanmu({
					text: this.inputValue,
					color: this.getRandomColor()
				})
			},
			videoErrorCallback: function (e) {
				console.log('视频错误信息:')
				console.log(e.target.errMsg)
			},
			getRandomColor: function () {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			}
		},
		onLoad(options) {
			console.log(options)
			// if(!options.url){
			// 	return '视频不见了'
			// }
			// this.url=options.url
		}
	}
</script>

<style lang="scss">
.page-body{
	.page-section{
		
	}
	.danmu{
		.danmu-name{
			font-weight: bold;
			padding: 10rpx 2rpx;
		}
		.input-area{
			height: 60rpx;
			border: 1rpx solid #007AFF;
			text-indent: 10rpx;
			margin: 0 2px;
			font-size: 30rpx;
		}
	}
	.btn{
		.btn-danmu{
			width: 400rpx;
			height: 80rpx;
			line-height: 80rpx;
			margin-top: 20rpx;
			border-radius: 30rpx;
			border: 1px solid red;
			&.btn-danmu:hover{
				background-color: red;
				color: #FFF;
			}
		}
	}
	.danmu-content{
		border-top: 1px solid #CCC;
		margin-top: 20rpx;
		.danmu-item{
			line-height: 60rpx;
		}
	}
}
</style>

